<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">  
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="all" property="" /> 
<!-- //Custom Theme files -->
<!-- font-awesome icons -->
<link href="css/font-awesome.css" rel="stylesheet"> 
<!-- //font-awesome icons -->
<!-- js -->
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/modernizr.js"></script>   
<!-- //js -->
<!--<link href='http://fonts.googleapis.com/css?family=Aref+Ruqaa:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>-->
</head>
<body>
	<div class="main"> 
		<!-- banner -->
		<div class="banner about-banner">
			<!-- header -->
			<div class="header">
				<div class="container">
					<div class="logo">
						<h1><a href="index.html">Snapshot</a></h1>
					</div> 
					<div class="logo-right">
						<p><i class="fa fa-phone" aria-hidden="true"> </i> 111 222 3333</p> 
					</div>  
					<div class="top-nav"> 
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<!-- //header -->
			<!-- banner-text -->
			<div class="about-banner-text"> 
				<div class="container">
					<ol class="breadcrumb">
						<li><a href="index.html">Home</a></li> 
						<li class="active">Contact</li>
					</ol> 
				</div>
			</div>
			<!-- //banner-text -->
		</div>
		<!-- //banner -->  
		<!-- contact -->
		<div class="contact">
			<div class="container">
				<h3 class="w3ls-title">Contact Us</h3> 
				<div class="contact-w3lsrow">
					<div class="col-md-6 contact-left">
						<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3023.9503398796587!2d-73.9940307!3d40.719109700000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a27e2f24131%3A0x64ffc98d24069f02!2sCANADA!5e0!3m2!1sen!2sin!4v1441710758555" allowfullscreen></iframe>
					</div>
					<div class="col-md-6 contact-right">
						<form action="#" method="post">
							<div class="styled-input agile-styled-input-top">
								<input type="text" name="Name" required="">
								<label>Name</label>
								<span></span>
							</div>
							<div class="styled-input">
								<input type="text" name="Email" required=""> 
								<label>Email</label>
								<span></span>
							</div> 
							<div class="styled-input">
								<input type="text" name="Subject" required="">
								<label>Subject</label>
								<span></span>
							</div>
							<div class="styled-input">
								<textarea name="Message" required=""></textarea>
								<label>Message</label>
								<span></span>
							</div>	 
							<input type="submit" value="SEND">
						</form>
					</div>
					<div class="clearfix"> </div>
				</div> 
			</div>
		</div>
		<!-- //contact --> 
		<!-- address -->
		<div class="address"> 
			<div class="col-md-4 address-left">
				<h4>Contact Info</h4>
				<ul>
					<li><i class="fa fa-map-marker"></i> 123 San Sebastian, New York City USA.</li>
					<li><i class="fa fa-mobile"></i> 333 222 3333 </li>
					<li><i class="fa fa-phone"></i> +222 11 4444 </li>
					<li><i class="fa fa-envelope-o"></i> <a href="mailto:example@mail.com"> mail@example.com</a></li>
				</ul> 
			</div>
			<div class="col-md-8 address-right">  
				<form action="#" method="post"> 
					<input type="text" name="email" placeholder="Enter your Email..." required="">
					<input type="submit" value="Subscribe">
				</form>
				<div class="clearfix"> </div> 
			</div>
			<div class="clearfix"> </div>
		</div>
		<!-- //address -->
		<!-- footer -->
		<div class="footer">
			<div class="container">
				<h3><a href="index.html">Snapshot</a></h3>
				<p>Copyright &copy; 2016.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
				<div class="social-icons">
					<ul>
						<li><a href="#" class="fa fa-facebook icon icon-border facebook"> </a></li>
						<li><a href="#" class="fa fa-twitter icon icon-border twitter"> </a></li>
						<li><a href="#" class="fa fa-google-plus icon icon-border googleplus"> </a></li>
						<li><a href="#" class="fa fa-dribbble icon icon-border dribbble"> </a></li>
						<li><a href="#" class="fa fa-rss icon icon-border rss"> </a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- //footer -->	 
	</div> 
	<a href="#navi" class="navi-trigger"> <span class="navi-icon"> <svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54"></svg> </span> </a> 
	<!-- Hidden Navi Menu -->
	<div id="navi" class="navi">
		<div class="navigation-wrapper">
			<div class="half-block">
				<h2>Navigation</h2>
				<nav>
					<ul class="primary-navi">
						<li><a href="index.html">Home</a></li>
						<li><a href="about.html">About</a></li>
						<li><a href="services.html">Services</a></li>
						<li><a href="codes.html">Short Codes</a></li>
						<li><a href="gallery.html">Gallery</a></li>
						<li><a href="contact.html" class="selected">Contact Us</a></li>
					</ul>
				</nav>
			</div>
		</div>
	</div>
	<script>
	jQuery(document).ready(function($){
		var isLateralNavAnimating = false;
		
		//open/close lateral navigation
		$('.navi-trigger').on('click', function(event){
			event.preventDefault();
			//stop if nav animation is running 
			if( !isLateralNavAnimating ) {
				if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true; 
				
				$('body').toggleClass('navigation-is-open');
				$('.navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
					//animation is over
					isLateralNavAnimating = false;
				});
			}
		});
	});
	</script>
	<!-- //Hidden Navi Menu -->  
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/bootstrap.js"></script>
</body>
</html>